<template>
    <div id="salesList">
        <h2>销售员列表</h2>
        <template>
            <el-table :data="salesData" border style="width: 100%">
                <el-table-column prop="username" label="账号"></el-table-column>
                <el-table-column prop="name" label="姓名"> </el-table-column>
                <el-table-column prop="age" label="年龄"> </el-table-column>
                <el-table-column prop="gender" label="性别"> </el-table-column>
                <el-table-column prop="phone" label="联系方式">
                </el-table-column>
                <el-table-column prop="headSculpture" label="头像">
                    <template slot-scope="scope">
                        <img
                            src="http://localhost:3000/images/2.png"
                            alt=""
                            v-if="!scope.row.headSculpture"
                        />
                        <img
                            :src="
                                'http://localhost:3000/images/' +
                                scope.row.headSculpture
                            "
                            alt=""
                            v-if="scope.row.headSculpture"
                        />
                    </template>
                </el-table-column>
                <el-table-column prop="state" label="状态"></el-table-column>
                <el-table-column prop="customersId" label="客户信息">
                    <template slot-scope="scope">
                        <el-button
                            size="mini"
                            @click="getCustomersBySalesId(scope.row._id)"
                            >查看</el-button
                        >
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150px">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="getSaleById(scope.row)"
                            >修改</el-button
                        >
                        <el-button
                            size="mini"
                            type="danger"
                            @click="deleteSales(scope.row._id)"
                            >删除</el-button
                        >
                    </template>
                </el-table-column>
            </el-table>
        </template>

        <div class="block">
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-sizes="[3, 5, 7, 10]"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

  <script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapActions, mapMutations } = createNamespacedHelpers(
    "salesManage"
);
const { mapMutations: customersMapMutations } = createNamespacedHelpers(
    "customersManage"
);
export default {
    computed: {
        ...mapState(["salesData", "pages", "total", "pageSize", "currentPage"]),
    },
    watch: {
        pageSize() {
            this.getSales();
        },
        currentPage() {
            this.getSales();
        },
    },
    methods: {
        handleSizeChange(val) {
            // console.log(`每页 ${val} 条`);
            this.setPageSize(val);
        },
        handleCurrentChange(val) {
            // console.log(`当前页: ${val}`);
            this.setCurrentPage(val);
        },
        getSaleById(data) {
            this.setUpdateSale(data);
            this.$router.push("/system/salesUpdate/" + data._id);
        },
        ...mapActions([
            "getSales",
            "deleteSales",
            "getAllCustomersBelongToTheSales",
        ]),
        ...mapMutations([
            "setPageData",
            "setPageSize",
            "setCurrentPage",
            "setUpdateSale",
            "setCustomersId",
        ]),
        ...customersMapMutations(["setBelongToSales"]),
        getCustomersBySalesId(_id) {
            this.setBelongToSales(_id);
            this.$router.push("/system/aLLCustomersBelongToTheSales/" + _id);
        },
    },
    mounted() {
        this.getSales();
    },
};
</script>
<style lang="scss">
#salesList {
    padding-left: 20px;
    & > h2 {
        padding-left: 10px;
        margin-bottom: 20px;
        height: 50px;
        line-height: 50px;
        text-align: left;
        border-bottom: 1px solid lightGray;
    }
    .block {
        margin-top: 20px;
        text-align: left;
    }
    .el-table {
        th,
        td {
            text-align: center;
        }
    }
    img {
        width: 60px;
        height: 60px;
    }
}
</style>